<template>
  <BasicModal
    v-bind="$attrs"
    @register="register"
    :title="displayModuleTitle"
    width="650px"
    @cancel="close"
    @ok="onOkButtonClick"
  >
    <vue-esign
      ref="esign"
      :width="600"
      :height="350"
      :isCrop="true"
      :lineWidth="4"
      lineColor="#000"
      bgColor="#f6f6f6"
      :isClearBgColor="false"
    />
    <a-button type="primary" @click="handleReset">清空签名版</a-button>
  </BasicModal>
</template>
<script lang="ts">
  import { computed, defineComponent, ref, unref } from 'vue';
  import { BasicModal, useModalInner } from '/@/components/Modal';
  import { displayTitle } from '/@/utils/QcUnifyUtil';
  import { QcUnifyTransToChildProps } from '/#/QcUnify';
  import { useMessage } from '/@/hooks/web/useMessage';
  import { uploadApi } from '/@/api/platform/upload';

  import vueEsign from 'vue-esign';
  const { createMessage } = useMessage();
  export default defineComponent({
    components: { BasicModal, vueEsign },
    emits: ['success'],
    setup(props, { emit }) {
      const esign = ref();
      const qcUnifyProps = ref<QcUnifyTransToChildProps>();
      const dataId = ref();
      const [register, { closeModal }] = useModalInner((data) => {
        if (data != undefined && data != null) {
          let unrefData = unref(data);
          qcUnifyProps.value = unrefData;
          dataId.value = unrefData.dataId;
        }
      });

      function base64ToFile(base64, fileName) {
        // 将base64按照 , 进行分割 将前缀  与后续内容分隔开
        let data = base64.split(',');
        // 利用正则表达式 从前缀中获取图片的类型信息（image/png、image/jpeg、image/webp等）
        let type = data[0].match(/:(.*?);/)[1];
        // 从图片的类型信息中 获取具体的文件格式后缀（png、jpeg、webp）
        let suffix = type.split('/')[1];
        // 使用atob()对base64数据进行解码  结果是一个文件数据流 以字符串的格式输出
        const bstr = window.atob(data[1]);
        // 获取解码结果字符串的长度
        let n = bstr.length;
        // 根据解码结果字符串的长度创建一个等长的整形数字数组
        // 但在创建时 所有元素初始值都为 0
        const u8arr = new Uint8Array(n);
        // 将整形数组的每个元素填充为解码结果字符串对应位置字符的UTF-16 编码单元
        while (n--) {
          // charCodeAt()：获取给定索引处字符对应的 UTF-16 代码单元
          u8arr[n] = bstr.charCodeAt(n);
        }
        // 利用构造函数创建File文件对象
        // new File(bits, name, options)
        const file = new File([u8arr], `${fileName}.${suffix}`, {
          type: type,
        });
        // 将File文件对象返回给方法的调用者
        return file;
      }

      function onOkButtonClick() {
        esign.value
          .generate()
          .then((res) => {
            // res base64图片
            const file = base64ToFile(res, 'sign');
            uploadApi({ system: 'ehs', file: file, module: 'sign' })
              .then((res) => {
                if (res.data.data.success) {
                  createMessage.success('上传成功');
                  handleReset();
                  closeModal();
                  emit('success', res.data.data.fileid);
                } else {
                  createMessage.error('操作失败,请稍后重试');
                }
              })
              .catch((err) => {
                console.log(err);
                createMessage.error('保存签名失败,请稍后重试');
              });
          })
          .catch((err) => {
            createMessage.error('未检测到签名,请稍后重试');
          });
      }

      function handleReset() {
        esign.value.reset();
      }

      function close() {
        closeModal();
        handleReset();
      }

      let displayModuleTitle = computed(() => {
        return displayTitle(qcUnifyProps.value);
      });
      return {
        register,
        esign,
        close,
        closeModal,
        handleReset,
        displayModuleTitle,
        onOkButtonClick,
      };
    },
  });
</script>
